<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">评价</view>
        </view>
        
        <!-- 医生信息 -->
        <view class="doctor-info">
            <image class="avatar" :src="doctorInfo.avatar" mode="aspectFill"></image>
            <view class="info">
                <view class="name">{{doctorInfo.name}}</view>
                <view class="title">{{doctorInfo.title}}</view>
            </view>
        </view>
        
        <!-- 评分区域 -->
        <view class="rating-section">
            <view class="title">总体评分</view>
            <view class="rating">
                <u-rate 
                    v-model="rating" 
                    size="40" 
                    active-color="#FFB800"
                    inactive-color="#E8E8E8"
                ></u-rate>
                <text class="score">{{rating}}分</text>
            </view>
        </view>
        
        <!-- 评价标签 -->
        <view class="tags-section">
            <view class="title">评价标签</view>
            <view class="tags">
                <view 
                    class="tag" 
                    v-for="(item, index) in tags" 
                    :key="index"
                    :class="{'active': selectedTags.includes(item)}"
                    @click="toggleTag(item)"
                >
                    {{item}}
                </view>
            </view>
        </view>
        
        <!-- 评价内容 -->
        <view class="content-section">
            <view class="title">评价内容</view>
            <textarea 
                class="textarea" 
                v-model="content" 
                placeholder="请输入您的评价内容（选填）"
                maxlength="500"
            ></textarea>
            <view class="word-count">{{content.length}}/500</view>
        </view>
        
        <!-- 上传图片 -->
        <view class="upload-section">
            <view class="title">上传图片</view>
            <view class="upload-list">
                <view 
                    class="upload-item" 
                    v-for="(item, index) in images" 
                    :key="index"
                >
                    <image :src="item" mode="aspectFill"></image>
                    <view class="delete" @click="deleteImage(index)">
                        <u-icon name="close" size="24" color="#fff"></u-icon>
                    </view>
                </view>
                <view class="upload-btn" @click="chooseImage" v-if="images.length < 9">
                    <u-icon name="plus" size="40" color="#999"></u-icon>
                </view>
            </view>
        </view>
        
        <!-- 提交按钮 -->
        <view class="submit-section">
            <view class="btn" @click="submitReview">
                <text>提交评价</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            doctorInfo: {
                name: '张医生',
                title: '主任医师',
                avatar: '/static/images/doctor1.png'
            },
            rating: 5,
            tags: [
                '医术精湛',
                '态度和蔼',
                '耐心细致',
                '专业负责',
                '经验丰富',
                '解答详细',
                '诊断准确',
                '服务周到'
            ],
            selectedTags: [],
            content: '',
            images: []
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        toggleTag(tag) {
            const index = this.selectedTags.indexOf(tag)
            if (index > -1) {
                this.selectedTags.splice(index, 1)
            } else {
                if (this.selectedTags.length < 3) {
                    this.selectedTags.push(tag)
                } else {
                    uni.showToast({
                        title: '最多选择3个标签',
                        icon: 'none'
                    })
                }
            }
        },
        chooseImage() {
            uni.chooseImage({
                count: 9 - this.images.length,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.images = [...this.images, ...res.tempFilePaths]
                }
            })
        },
        deleteImage(index) {
            this.images.splice(index, 1)
        },
        submitReview() {
            if (this.rating === 0) {
                uni.showToast({
                    title: '请选择评分',
                    icon: 'none'
                })
                return
            }
            
            if (this.selectedTags.length === 0) {
                uni.showToast({
                    title: '请选择评价标签',
                    icon: 'none'
                })
                return
            }
            
            // 模拟提交
            uni.showLoading({
                title: '提交中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '评价成功',
                    icon: 'success'
                })
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            }, 1000)
        }
    },
    onLoad(options) {
        // 这里可以根据传入的id获取医生信息
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    padding-bottom: 120rpx;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .doctor-info {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        
        .avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50rpx;
            margin-right: 20rpx;
        }
        
        .info {
            .name {
                font-size: 32rpx;
                color: #333;
                font-weight: bold;
                margin-bottom: 10rpx;
            }
            
            .title {
                font-size: 24rpx;
                color: #666;
            }
        }
    }
    
    .rating-section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .rating {
            display: flex;
            align-items: center;
            
            .score {
                font-size: 32rpx;
                color: #FFB800;
                margin-left: 20rpx;
                font-weight: bold;
            }
        }
    }
    
    .tags-section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .tags {
            display: flex;
            flex-wrap: wrap;
            
            .tag {
                padding: 10rpx 20rpx;
                background-color: #F7F7FA;
                border-radius: 30rpx;
                font-size: 24rpx;
                color: #666;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                
                &.active {
                    color: #1890FF;
                    background-color: #E6F7FF;
                }
            }
        }
    }
    
    .content-section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .textarea {
            width: 100%;
            height: 200rpx;
            background-color: #F7F7FA;
            border-radius: 10rpx;
            padding: 20rpx;
            font-size: 28rpx;
            color: #333;
        }
        
        .word-count {
            text-align: right;
            font-size: 24rpx;
            color: #999;
            margin-top: 10rpx;
        }
    }
    
    .upload-section {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .upload-list {
            display: flex;
            flex-wrap: wrap;
            
            .upload-item {
                width: 160rpx;
                height: 160rpx;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                position: relative;
                
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
                
                .delete {
                    position: absolute;
                    top: 10rpx;
                    right: 10rpx;
                    width: 40rpx;
                    height: 40rpx;
                    background-color: rgba(0, 0, 0, 0.5);
                    border-radius: 20rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            
            .upload-btn {
                width: 160rpx;
                height: 160rpx;
                background-color: #F7F7FA;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    
    .submit-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20rpx 30rpx;
        background-color: #fff;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
        
        .btn {
            height: 80rpx;
            background-color: #1890FF;
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            
            text {
                font-size: 28rpx;
                color: #fff;
                font-weight: bold;
            }
        }
    }
}
</style> 